<template>
    <el-form :model="casingsData" label-width="120px">

        <el-form-item label="选择套管 ">
            <el-select v-model="choose" placeholder="选择套管">
                <el-option v-for="item in casingsData" :value="item.id" :label="'套管' + item.name" /></el-select>
        </el-form-item>
        <el-form-item label="外 径（ mm ）">
            <el-select v-model="casingsData[choose].outerDiameter" placeholder="外 径（ mm ）">
                <el-option v-for="item in outerDiameterData" :value="item.value" :label="item.label" />
            </el-select>
        </el-form-item>
        <el-form-item label=" 内 径（ mm ）">
            <el-input-number v-model="casingsData[choose].innerDiameter" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="顶 部 （ m ）">
            <el-input-number v-model="casingsData[choose].top" class="mx-4" :min="0" :max="casingsData[choose].bottom"
                controls-position="right" />
        </el-form-item>
        <el-form-item label="底 部（ m ）">
            <el-input-number v-model="casingsData[choose].bottom" class="mx-4" :min="casingsData[choose].top"
                :max="casingsData[choose].max" controls-position="right" />
        </el-form-item>
        <!-- 弹窗提示 -->
        <el-alert :title="casingsData[choose].alertText" type="info" style="margin-bottom: 10px;">
        </el-alert>
        <el-form-item label="重 量（ kg/m ）">
            <el-input-number v-model="casingsData[choose].weight" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-button type="danger" style="margin-left: 50px ; margin-top: 50px;"  @click="handleDeleteCasing">删除</el-button>
    </el-form>
</template>
<script setup>
import { reactive} from 'vue'
import { updateCasing , deleteCasing} from "@/api/casing"
import d3DrawStore from '@/store/modules/d3Draw'
import casingStore from '@/store/modules/casingDraw'
const d3Store = d3DrawStore();
const casingDraw = casingStore();
const choose = ref(casingDraw.chooseCasing);
const outerDiameterData = reactive([{ value: 48.26, label: "48.26" }, { value: 60.32, label: "60.32" }, { value: 73.02, label: "73.02" }, { value: 88.90, label: "88.90" }, { value: 101.60, label: "101.60" }, { value: 114.30, label: "114.30" }]);
const casingsData = reactive(casingDraw.casingData)

function handleDeleteCasing(){
    deleteCasing(casingDraw.casing[choose.value])
    casingDraw.deleteCasing(choose.value);
    casingsData = casingDraw.casingData
}

function casingRed(a) {
    if (casingDraw.casing.length > 0) {
        casingDraw.casingRed(a);
    }
}
casingRed(choose.value);

function initOneDemo() {
    for (let i = 0; i < 3; i++) {
        casingDraw.saveInitCasings(casingsData[i].outerDiameter, casingsData[i].top, casingsData[i].bottom);
    }
}

watch(() => [casingsData[choose.value].outerDiameter, casingsData[choose.value].top, casingsData[choose.value].bottom, choose.value], ([outerDiameter, top, bottom]) => {
    casingsData[choose.value].innerDiameter = (outerDiameter - 10).toFixed(2);
    const d3Canvas = d3Store.d3Canvas;
    if (casingDraw.casing.length == 0) {
        initOneDemo()
    }
    casingDraw.casingBlack();
    updateCasing(casingDraw.casing[choose.value], d3Canvas, outerDiameter, top, bottom);
    casingDraw.chooseCasing = choose.value;
});

</script>